<template>
  <Modal v-model="show" title="分配权限">
    <div style="height: 600px;overflow:hidden scroll;">
      <!--  VanTree中 提供了一个 getCheckedAndIndeterminateNodes 方法，用来获取勾选的所有节点   -->
      <VanTree ref="tree" :treeNodes="treeNodes" show-checkbox/>
    </div>
    <template #footer>
      <Button type="default" @click="show = false">关闭</Button>
      <Button :icon="treeBtn.icon" type="info" @click="treeNode">{{ treeBtn.text }}</Button>
      <Button type="primary" @click="savePermission">确定</Button>
    </template>
  </Modal>
</template>

<script>
import VanTree from "./VanTree.vue";

export default {
  props: {
    modelValue: {type: Boolean, required: true},
    roleId: {type: Number, required: true},
  },
  data() {
    return {
      treeBtnIndex: 0,
      treeBtnList: [
        {icon: 'md-add-circle', text: "全部选中"},
        {icon: 'ios-remove-circle', text: "全部取消"},
      ],
      checkStrictly: true,
      treeNodes: [
        {
          id: 1,
          title: '系统管理',
          expand: true,
          checked: true,
          children: [
            {
              id: 2,
              title: '菜单管理',
              expand: true,
              checked: true,
              children: [
                {
                  id: 3,
                  title: '新增菜单',
                  //disabled: true
                },
                {
                  id: 4,
                  title: '修改'
                },
                {
                  id: 5,
                  title: '删除'
                }
              ]
            },
            {
              id: 6,
              title: '功能管理',
              expand: true,
              checked: true,
              children: [
                {
                  id: 7,
                  title: '新增功能',
                  checked: true
                },
                {
                  id: 8,
                  title: '添加按钮'
                },
                {
                  id: 9,
                  title: '修改'
                },
                {
                  id: 10,
                  title: '删除'
                }
              ]
            }
          ]
        },
        {
          id: 11,
          title: '用户权限管理',
          checked: true,
          expand: true,
          children: [
            {
              id: 12,
              title: '部门管理',
              expand: true,
              children: [
                {
                  id: 13,
                  title: '新增一级部门',
                  checked: false,
                },
                {
                  id: 14,
                  title: '新增子部门',
                  checked: false,
                },
                {
                  id: 15,
                  title: '修改',
                  checked: false,
                },
                {
                  id: 16,
                  title: '删除',
                  checked: false,
                }
              ]
            },
            {
              id: 17,
              title: '岗位管理',
              expand: true,
              children: [
                {
                  id: 18,
                  title: '新增岗位',
                  checked: true
                },
                {
                  id: 19,
                  title: '修改',
                  checked: false,
                },
                {
                  id: 20,
                  title: '删除',
                  checked: false,
                }
              ]
            },
            {
              id: 21,
              title: '用户管理',
              expand: true,
              children: [
                {
                  id: 22,
                  title: '新增用户',
                  checked: false,
                },
                {
                  id: 23,
                  title: '分配部门',
                  checked: false,
                },
                {
                  id: 24,
                  title: '分配岗位',
                  checked: false,

                },

                {
                  id: 25,
                  title: '重置密码',
                  checked: false,

                },
                {
                  id: 26,
                  title: '修改',
                  checked: false,

                },
                {
                  id: 27,
                  title: '注销',
                  checked: false,

                }
              ]
            },
            {
              id: 28,
              title: '角色管理',
              expand: true,
              children: [
                {
                  id: 29,
                  title: '新增角色',
                  checked: true
                },
                {
                  id: 30,
                  title: '分配权限',
                  checked: true
                },
                {
                  id: 31,
                  title: '修改',
                  checked: true
                },
                {
                  id: 32,
                  title: '删除',
                  checked: true
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 勾选获取取消所有
    selectOrCancelAllNodes(flag) {
      this.treeNodes.forEach(node => {
        this.selectOrCancelNode(node, flag);
      })
    },

    treeNode() {
      // 实现 全选 获取 取消
      this.selectOrCancelAllNodes(this.treeBtnIndex++ % 2 == 0);
    },

    selectOrCancelNode(node, flag) {
      node.checked = flag;
      if (node.children != null) {
        node.children.forEach(n => this.selectOrCancelNode(n, flag))
      }
    },
    checkedNodeAndParents(selectNodes, node) { // 实现 勾选子节点，自动勾选所有父节点
      console.log(selectNodes);
    },
    savePermission(){
       // 获取选中的所有节点
       let nodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
       console.log(nodes);
    }
  },
  components: {
    VanTree,
  },
  computed: {
    treeBtn() {
      return this.treeBtnList[this.treeBtnIndex % 2];
    },
    show: {
      get() {
        return this.modelValue ;
      },
      set(val) {
        this.$emit("update:model-value", val);
      }
    }
  }
}
</script>

<style>
</style>